<template>
  <div class="index">
    <!-- 顶部搜索 -->
    <div class="index_logo">
      <div class="logo">
        <div class="logos">
          <img src="../assets/logo.png" alt />
        </div>
        <van-search shape="round" placeholder="花洒仅398元" v-model="value" />
        <div class="gou">
          <a href="/shopc">
            <van-icon name="cart-o" size="27px" />
          </a>
          <a href="/login" v-if="token == null">登录</a>
        </div>
      </div>
    </div>
    <div class="connext">
      <!-- 轮播 -->
      <div class="index_swipe-index">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in swpie" :key="index">
            <van-image :src="item.image"></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 服务 -->
      <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="(item, index) in fw" :key="index">
          <van-image :src="item.image" />
          <span>{{item.index_fuwu}}</span>
        </van-grid-item>
      </van-grid>
      <!-- 广告 -->
      <div>
        <van-image src="https://gfs13.gomein.net.cn/wireless/T1qBDyBKEv1RCvBVdK_1125_336.png" />
      </div>
      <!-- 图片 -->
      <div class="contented">
        <van-grid :border="false" :column-num="2" >
          <van-grid-item>
            <van-image src="https://gfs12.gomein.net.cn/T1cBJyB4ZT1RCvBVdK.gif" />
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://gfs10.gomein.net.cn/T1qjYyBmh_1RCvBVdK.gif" />
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 头条 -->
      <section class="headline flexbox gongtop" style="border-radius: .8rem .8rem 0 0;">
        <div class="caption">
          <div class="title">
            <img src="https://gfs13.gomein.net.cn/wireless/T1yEhbB7J_1RCvBVdK_120_28.png" />
          </div>
        </div>
        <div class="lun flex1">
          <div class="headlineScroll">
            <ul class="ul_list" :class="{marquee_top:animate}">
              <li v-for="(item, index) in wordList" :key="index" class="swiper-slide">
                <a href="#">
                  <span class="tag">{{item.ti}}</span>
                  {{item.contents}}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <!-- 秒杀 -->
      <div class="miaosha">
        <van-grid :border="false" :column-num="2" :center="false">
          <van-grid-item style="border-right: 1px solid #999999;">
            <div class="rush_title">
              <p class="rush-buy-title">
                <img src="https://gfs10.gomein.net.cn/wireless/T1fyDjBjZ_1RCvBVdK_120_28.png" alt />
              </p>
              <div class="daojis">
                <van-count-down :time="time"></van-count-down>
              </div>
            </div>
            <van-image src="https://gfs17.gomein.net.cn/T1ocW_BsZT1RCvBVdK_260.jpg?v=2" />
          </van-grid-item>
          <van-grid-item>
            <p style="color: #fd851d; font-size: 1.1rem; text-align: left; margin-left: 10px;">值得买</p>
            <p style="font-size: 0.8rem; text-align: left; margin-left: 10px;">口碑好物 甄选品质</p>
            <van-image src="https://gfs11.gomein.net.cn/T1VqJyBCEv1RCvBVdK.gif" />
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 优选指南 -->
      <div class="great_choose">
        <div class="choose_top gongtop">
          <img src="https://gfs12.gomein.net.cn/wireless/T1ilbyBXEv1RCvBVdK_1065_129.png" alt />
          <a href="#">更多></a>
        </div>
        <van-grid :border="false" :column-num="2" style="margin:0 1rem;">
          <van-grid-item style="border-right: 1px solid #999999;">
            <van-image
              style="width: 100%; height: 100%;"
              src="https://gfs10.gomein.net.cn/wireless/T1E3VyB_CT1RCvBVdK_354_242.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              style="width: 100%; height: 100%;"
              src="https://gfs6.gomein.net.cn/wireless/T11jLyBgJT1RCvBVdK_354_242.png"
            />
          </van-grid-item>
        </van-grid>
        <div class="youxuab-swipe" style="padding: 5px 10px; background-color:#ffffff; margin:0 1rem;">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img style="width:100%; height: 100%;" src="../assets/image/index_image/y1.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img style="width:100%; height: 100%;" src="../assets/image/index_image/y2.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img style="width:100%; height: 100%;" src="../assets/image/index_image/y3.png" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 精彩活动 -->
      <div class="active">
        <div class="active_top gongtop">
          <img src="https://gfs11.gomein.net.cn/wireless/T1frKyBjYv1RCvBVdK_1065_129.png" alt />
        </div>
        <van-grid :border="false" :column-num="2" style="margin:0 1rem;">
          <van-grid-item style="border-right: 1px solid #999999;">
            <p style="font-size: 1.1rem; text-align: left;">电脑潮玩先锋</p>
            <p style="font-size: 0.8rem; color:#999999; text-align: left;">爆品直降1000元</p>
            <van-image
              style="width:100%; height:100%;"
              src="https://gfs7.gomein.net.cn/wireless/T1vsAyB7YT1RCvBVdK_355_144.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <p style="font-size: 1.1rem; text-align: left;">冰箱洗衣机全民嗨购</p>
            <p style="font-size: 0.8rem; color:#999999; text-align: left;">海尔192L双门冰箱1199元</p>
            <van-image
              style="width:100%; height:100%;"
              src="https://gfs9.gomein.net.cn/wireless/T1SBLyBmVT1RCvBVdK_355_144.jpg"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 特色服务 -->
      <div class="spcfuwu">
        <div class="spcfw_top gongtop">
          <img src="https://gfs13.gomein.net.cn/wireless/T1JrVyBXLv1RCvBVdK_1065_129.png" alt />
        </div>
        <van-grid :border="false" :column-num="2" style="margin:0 1rem;">
          <van-grid-item style="border-right: 1px solid #999999;">
            <p style="font-size: 1.1rem; text-align: left;">国美舒适家</p>
            <p style="font-size: 0.8rem; color:#999999; text-align: left;">呼吸优质空气</p>
            <van-image
              style="width:100%; height:100%;"
              src="https://gfs11.gomein.net.cn/wireless/T14xAXBTdT1RCvBVdK_355_144.jpg"
            />
          </van-grid-item>
          <van-grid-item>
            <p style="font-size: 1.1rem; text-align: left;">安装清洗</p>
            <p style="font-size: 0.8rem; color:#999999; text-align: left;">国美为您提供上门服务</p>
            <van-image
              style="width:100%; height:100%;"
              src="https://gfs11.gomein.net.cn/wireless/T1DYVXBQdT1RCvBVdK_355_144.jpg"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 猜你喜欢 -->
      <div class="turelike">
        <div class="tlike_top gongtop">
          <img src="https://gfs10.gomein.net.cn/wireless/T1Go_jBjD_1RCvBVdK_1065_129.png" alt />
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          style="margin:0 1rem;"
        >
          <van-grid :column-num="2">
            <van-grid-item v-for="(item, index) in shangp" :key="index">
              <a href="javascript:;">
                <van-image :src="item.image" />
              </a>
              <p class="namelegth" style="font-size:1rem; margin-top: 10px;">
                <van-tag plain type="danger">{{item.goods_name.substr(0,2)}}</van-tag>
                {{item.goods_name.slice(2)}}
              </p>
              <p>
                <em class="jiaspan" style="color: #f20c59;">￥{{item.price}}</em>
                <!-- <a href="/smiler" class="btn" >看相似</a> -->
                <button class="btn" @click="seeShop(item.id)">看相似</button>
              </p>
            </van-grid-item>
          </van-grid>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      token: sessionStorage.getItem('token'),
      value: '',
      swpie: [], // 首页轮播
      fw: [], // 首页服务
      animate: false, // 广告头条
      wordList: [
        {
          ti: '电视放肆购',
          contents: '100元优惠券免费领'
        },
        {
          ti: '国美黄金',
          contents: '投资金条 优惠购金'
        },
        {
          ti: '冰箱洗衣机',
          contents: '海尔192L双门冰箱1199元'
        }
      ], // 头条
      time: 24 * 60 * 60 * 1000,
      loading: false,
      finished: false,
      shangp: [],
      page: 1,
      per_page: 15
    }
  },
  created () {
    // 轮播
    this.$http.get('/swpie_image').then(res => {
      // console.log(res)
      this.swpie = res.data.data
    })
    // 服务
    this.$http.get('/index_fw').then(res => {
      // console.log(res)
      this.fw = res.data.data
    })
    setInterval(this.showMarquee, 2000)
  },
  methods: {
    // toGoodsDetail (gid) {
    //   this.$router.push(`/goods_details`)
    //   localStorage.setItem('goodsID', gid)
    // },
    // 广告动画
    showMarquee: function () {
      this.animate = true
      setTimeout(() => {
        this.wordList.push(this.wordList[0])
        this.wordList.shift()
        this.animate = false
      }, 500)
    },
    // 数据加载
    onLoad () {
      // 异步更新数据
      this.$http
        .get(`/index_goods?page=${this.page}&per_page=${this.per_page}`)
        .then(res => {
          // console.log(res)
          this.shangp.push(...res.data.data)

          // console.log(this.shangp)
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.shangp.length >= 65) {
            this.finished = true
          } else {
            this.page++
          }
        })
    },
    seeShop (id) {
      // console.log(id)
      sessionStorage.setItem('id', id)
      this.$router.push('/smiler')
    }
  }
}
</script>

<style lang='less'>
body {
  background-color: #f2f2f2;
}

.index {
  padding-bottom: 50px;
  text-align: center;
  background-color: #f2f2f2;
}
.index .index_logo {
  position: relative;
  width: 100%;
  height: 50px;
}
.index .logo {
  position: fixed;
  width: 100%;
  height: 50px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 11px;
  background-color: #fff;
  z-index: 100;
}

.index .logo .logos {
  float: left;
  padding: 12px;
}
.index .logo img {
  width: 28.8px;
  height: 28.8px;
}

.index .logo .van-search {
  float: left;
  width: 216px;
}

.index .logo .gou {
  float: left;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 5px;
}

.index .logo .gou a {
  display: inline-block;
  color: #666666;
  height: 31px;
  line-height: 20px;
  padding-left: 10px;
}

.index .van-grid .van-grid-item__content {
  padding: 0;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}

.index_swipe-index .van-swipe {
  height: 180px;
}

.index > .connext > .van-grid {
  padding-top: 10px;
}

.index > .connext > .van-grid .van-image {
  width: 4.6875rem;
  height: 51.0.3125rem;
  margin-bottom: 5px;
}

.index .van-grid span {
  font-size: 12px;
}

.index .contented {
  margin: 10px auto;
}

.index .contented .van-grid .van-image,
.index .contented .van-grid .van-image img {
  width: 175px;
  height: 119px;
}

.index .headline {
  background-color: #fff;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  overflow: hidden;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
}

.index .gongtop {
  margin: 1rem 1rem 0;
}

.headline .caption {
  padding-left: 0.2rem;
  float: left;
}

.index .headline .caption .title {
  width: 6rem;
  height: 1.5rem;
  /* overflow: hidden; */
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0.3rem;
  /* padding-right: 0.7rem; */
  border-right: 1px solid #f2f2f2;
}

.index .headline .caption .title img {
  display: inline-block;
  width: 76.8px;
  height: 17.9px;
}
.index .headline .lun {
  float: left;
  /* padding-left: 0.7rem; */
  /* padding-right: 1rem; */
  /* font-size: 1.3rem; */
  /* overflow: hidden; */
  /* position: relative; */
  /* top: -38px; */
  /* left: 53px; */
}

.index .headline .headlineScroll {
  height: 2rem;
  overflow: hidden;
  display: block;
  position: relative;
}

.index .headline .headlineScroll .ul_list {
  display: block;
  /* position: absolute; */
  /* top: 0; */
  /* left:0; */
}

.headline .headlineScroll .marquee_top {
  transition: all 0.5s;
  margin-top: -30px;
}

.index .headline .lun li {
  line-height: 2rem;
  color: #333;
  position: relative;
}

.index .headline .lun li a {
  text-align: left;
  color: #666;
  font-size: 0.8rem;
}
.headline .lun .tag {
  height: 1.5rem;
  line-height: 1.5rem;
  display: inline-block;
  padding: 0 0.3rem;
  margin-top: 0.3rem;
  margin-right: 0.2rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 0.4rem;
  vertical-align: top;
  white-space: normal;
  box-sizing: border-box;
  color: #f20c56;
  background: #ffdce7;
}

.index .miaosha {
  margin: 0 1rem;
}

.index .miaosha .van-grid .van-grid-item__content,
.index .active .van-grid .van-grid-item__content,
.index .spcfuwu .van-grid .van-grid-item__content {
  background-color: #fff;
}

.index .miaosha .van-grid .van-image {
  width: 100%;
  height: 5rem;
}

.index .miaosha .rush_title {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  margin-top: 10px;
}

.index .miaosha .rush-buy-title {
  /* display: inline-block; */
  float: left;
  /* padding-left: 0.8rem; */
  width: 6.2rem;
  vertical-align: middle;
}

.index .miaosha .daojis {
  float: left;
}

.index .miaosha .rush-buy-title img {
  width: 74.39px;
  height: 17.34px;
}

.index .van-count-down {
  border: 0.0625rem solid #f20c56;
  border-radius: 0.4rem;
  color: #f20c56;
  width: 4rem;
  height: 1.2rem;
  line-height: 1.2rem;
}

.index .great_choose .choose_top {
  position: relative;
}

.index .great_choose .choose_top a {
  position: absolute;
  top: 0.8rem;
  left: 18.4rem;
  font-size: 0.9rem;
  color: #999999;
}

.index .great_choose .choose_top img,
.index .active .active_top img,
.index .spcfuwu .spcfw_top img,
.index .turelike .tlike_top img {
  width: 100%;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
}

.turelike .van-list .van-grid .van-grid-item {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 0.8rem;
  border: 0.125rem solid #f2f2f2;
}

.turelike .van-list .van-grid .van-grid-item__content {
  background-color: #fff;
}

.turelike .van-list .van-grid .van-image {
  width: 10.3125rem;
  height: 10.8125rem;
  border-radius: 0.8rem;
}

.turelike .van-list .van-grid .namelegth {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 10px;
}

.turelike .van-list .van-grid .jiaspan {
  position: absolute;
  left: 0rem;
}

.turelike .van-list .van-grid .btn {
  margin-left: 6rem;
  margin-right: 5px;
  margin-top: 0;
  padding: 0.1rem 0.2rem;
  text-align: center;
  border: 1px solid #e6e6e6;
  width: 4.1rem;
  height: 1.3rem;
  line-height: 1rem;
  font-size: 0.5rem;
  color: #999;
  border-radius: 0.9rem;
  background-color: #fff;
}
</style>
